
.commonGo{
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 100;
}
.commonMore{   
        position: fixed;
        bottom: 80px;
        right: 60px;
        z-index: 100;
        animation: more 0.3s linear infinite alternate;
}
.content{
    width: 900px;
    height: 600px;
   
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -450px;
}
/* 点击更多按钮的动画 */
@keyframes more{
    from{
        
        transform:translateY(-10px)
    }
    to{
        transform:translateY(10px)
    }

}
/* 第一屏样式 */
.screen01{
    background:url("../image/01-bg.png") no-repeat center bottom;
    
}
.screen01 .sofa{
    position: absolute;
    left: 230px;
    top: 150px;
    animation: sofa01 1s linear infinite alternate;


}
.screen01 .goods{
    position: absolute;
    right: 50px;
    top: 100px;
}
.screen01 .fly{
    position: absolute;
    top: -100px;
    right: -50px;
    animation: fly01 1s linear infinite alternate;
    
}
            /* 第一屏沙发的动画 */
@keyframes sofa01{
    from{
        
        transform:translateY(-20px)
    }
    to{
        transform:translateY(20px)
    }

}
        /* 第一屏飞机的动画 */
@keyframes fly01{
    from{
        
        transform:translateY(-30px)
    }
    to{
        transform:translateY(30px)
    }

}
/* 第二屏样式 */
.screen02{
    background:url("../image/02-bg.png") no-repeat center bottom; 
}
.screen02 .search{
position: absolute;
top:120px;
right:170px;
transform-origin: right top;
opacity:0;
 

}
.screen02 .search .searchTxt{
    position: absolute;
    top: 4px;
    right:50px;
    opacity: 0;
} 
.screen02 .sofas{
    position: absolute;
    left: 50%;
    margin-left: -220px;
    bottom: 210px;
    transform-origin: right bottom;
    transform: scale(0);
   
}
.screen02 .simpleSofa{
    position: absolute;
    left: 292px;
    top: 132px;
    transform: scale(0.5);
    opacity: 0;
    z-index: 999;
}

     /* 第二屏动画部分 */
.screen02.loaded .search{
    animation: search02 3s linear forwards;
}
.screen02.loaded .search .searchTxt{
    animation:search02txt 1s linear 1s forwards;
}

.screen02.loaded .sofas{
    animation:sofas02 1s linear 2s forwards;
}
.screen02.leaved .simpleSofa{
    animation:sofa02Leave 1s linear;
}


@keyframes search02{
    0%{
        opacity:1;
        transform:translate(2000px,130px)
    }
    33%{
        transform:translate(-180px,130px)  
    }
    66%{
        transform:translate(-180px,130px)  
    }
    100%{
        opacity:1;
        transform:scale(0.7)
    }
}
@keyframes sofas02{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes search02txt{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
    
@keyframes sofa02Leave{
0%{
    opacity: 1;
}
100%{
    opacity: 1;
    transform: translate(-80px,800px);
}
}
/* 第三屏 */
.screen03{
    background:url("../image/03-bg.png") no-repeat center bottom; 
}
.screen03 .goumai{
    position: absolute;
    right: 115px;
    bottom: 170px;
}
.screen03 .goumai img:nth-child(2){
    display: none;
    
}
.screen03 .sofa03{
    position: absolute;
    left: 212px;
    top: 180px;
   display: none;
    z-index: 1000;
}
.screen03.loaded .sofa03{
    display: block;
}
.screen03.loaded .goumai img:nth-child(2){
   display: block;
   transition: all 1s linear ;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
}
.screen03.loaded .goumai img:nth-child(1){
    display: none;
    transition: all 1s linear ;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
 }
 
 .screen03.leaved .sofa03{
    animation:sofa0304 1s linear;
 }
 @keyframes sofa0304{
    0%{
        
    }
   
    100%{
        transform: translate(190px,666px) rotate(45deg);
    }

 }
 /* 第四屏 */
 .screen04{
    background:url("../image/04-bg.png") no-repeat center bottom; 
} 
.screen04 .cloud{
    position: absolute;
    left: -100px;
    top: 100px;
}  
.screen04 .gallery{
    margin-top: 50px;
    text-align: center;
    position: relative;  
    z-index:1001;
}
.screen04 .galleyTxt{
    margin-top: 120px;
    text-align: center
}
.screen04 .galleyTxt img:nth-child(2){
    position: absolute;
    opacity: 0;
}

.screen04 .address04{
    position: absolute;
    width: 283px;
    height: 270px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 150px;
    opacity: 0;

}
.screen04 .address04 img:last-child {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.screen04 .sofa04{
    position: absolute;
    top: 180px;
    left: 420px;
    transform: rotate(45deg);
    opacity: 0;
}
.screen04.loaded .address04{
    animation: address04 1s linear 2s forwards;
}
.screen04.loaded .gallery{
    transition: all 3s;
    transform: translateX(1000px);
}
.screen04.loaded .sofa04{
    display: block;
    opacity: 1;
    transition: transform 3s;
    transform: translateX(1000px);
}
.screen04.loaded .cloud{
    animation:cload04 18s linear infinite alternate;
}
@keyframes cload04{
    0%{
        transform: translate(0,0)
    }
    100%{
        transform: translate(1000px,0)
    }
}
@keyframes address04{
    0%{
        
    }
    100%{
        opacity:1;
    }
}
/* 第五屏 */
.screen05{
    background:url("../image/07-bg.png") no-repeat center bottom; 
}
.screen05 .stars{
    position: absolute;
    left:159px;
    top: 139px;

}
.screen05 .stars img{
    opacity: 0;

}
.screen05.leaved .stars img{
    opacity: 1;
transition: all 0.5s linear;
}
.screen05 .text{
    position:absolute;
    left: 157px;
    top: 180px;
    opacity: 0;
    transform:scale(0);
    

}
.screen05.leaved .text {
    opacity: 1;
   animation:show05 1.2s 2.5s linear forwards;

}
@keyframes show05{
    0%{

    }
    70%{
       
        transform:scale(1.3);
    }
    100%{
        
        transform:scale(1);
    }
}
/* 第六屏 */
.screen06{
    background:url("../image/08-bg.png"); 
}
.screen06  .btns{
    width: 389px;
    height: 160px;
position: absolute;
left: 50%;
top: 100px;
transform: translateX(-50%);
}
.screen06  .btns img{
    position: absolute;
    left: 0;
    top: 0;
}
.screen06  .btns img:last-child{
    opacity: 0;
}
.screen06  .btns:hover img:last-child{
    
    opacity: 1;
}
.screen06 .hand{
    position: absolute;
    left: 50%;
    top: 300px;
    transform: translateX(-50%);
}
